<!-- 商品列表瀑布流 -->
<template>
	<!-- style="background:#fbf7f7;padding: 20rpx;" -->
	<view style="min-height: 500rpx;">
		<block v-if="allList.length > 0">
			<view class="df waterfall-goods" :style="{background:bgColorS,padding:paddingT}">
				<view class="waterfall-goods-son">
					<view v-for="(val, inx) in leftList" :key="inx"
						class="waterfall-goods-item shadow animation-slide-bottom"
						:style="{ animationDuration: parseInt(inx / pageNum) * 0.1 + 0.4 + 's'}"
						@click="waterItemBtn(val)">
						<image :src="val[imgKey] ? $Utils.img(val[imgKey]) : staticImgUrl + 'home/load_img.png'"
							mode="widthFix" style="width: 100%;" :style="{borderRadius: borderRadiusStyle+'rpx'}"
							:lazy-load="true">
						</image>
						<view class="waterfall-goods-title">{{ val[titleKey] }}</view>
						<!-- 						<block v-if="notShow==true">
							<view class="waterfall-goods-info line-text" v-if="val[infoKey]">
								{{ val[infoKey] }}
							</view>
						</block> -->
						<view class="goods-price slightly-red xszkstyle" v-if="val.promotion_type==1">限时折扣</view>
						<view style="display: flex;align-items: center;margin-top: 20rpx;">
							<view class="waterfall-goods-price" v-if="val.promotion_type==1">{{ val.discount_price }}
							</view>
							<view class="waterfall-goods-price" v-else>{{ val[priceKey] }}</view>
							<view class="goods-market-price" v-if="val.promotion_type==1">￥{{ val[priceKey] }}</view>
							<view class="goods-market-price" v-if="Number(val.market_price) > 0&&val.promotion_type!=1">
								￥{{ val.market_price }}</view>
						</view>
					</view>
				</view>
				<view class="waterfall-goods-son">
					<view v-for="(val, inx) in rightList" :key="inx"
						class="waterfall-goods-item shadow animation-slide-bottom"
						:style="{ animationDuration: parseInt(inx / pageNum) * 0.2 + 0.3 + 's'}"
						@click="waterItemBtn(val)">
						<image :src="val[imgKey] ? $Utils.img(val[imgKey]) : staticImgUrl + 'home/load_img.png'"
							mode="widthFix" style="width: 100%;" :style="{borderRadius: borderRadiusStyle+'rpx'}"
							:lazy-load="true">
						</image>
						<view class="waterfall-goods-title">{{ val[titleKey] }}</view>
						<!-- 						<block v-if="notShow==true">
							<view class="waterfall-goods-info line-text" v-if="val[infoKey]">
								{{ val[infoKey] }}
							</view>
						</block> -->
						<view class="goods-price slightly-red xszkstyle" v-if="val.promotion_type==1">限时折扣</view>
						<view style="display: flex;align-items: center;margin-top: 20rpx;">
							<view class="waterfall-goods-price" v-if="val.promotion_type==1">{{ val.discount_price }}
							</view>
							<view class="waterfall-goods-price" v-else>{{ val[priceKey] }}</view>
							<view class="goods-market-price" v-if="val.promotion_type==1">￥{{ val[priceKey] }}</view>
							<view class="goods-market-price" v-if="Number(val.market_price) > 0&&val.promotion_type!=1">
								￥{{ val.market_price }}</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="df-col-cen" v-if="emptyType" :style="{background:bgColorS}">
				<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png"
					mode="aspectFit" style="width: 360rpx;"></image>
				<view>暂无数据...</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			leftList: [],
			rightList: [],
			pageNum: 1
		}
	},
	props: {
		// 所有数组
		allList: {
			type: Array,
			default: () => {
				return []
			}
		},
		// 商品图片的key
		imgKey: {
			type: String,
			default: 'sku_image'
		},
		// 商品标题的key
		titleKey: {
			type: String,
			default: 'sku_name'
		},
		// 商品描述的key
		infoKey: {
			type: String,
			default: 'introduction'
		},
		// 商品价格的key
		priceKey: {
			type: String,
			default: 'price'
		},
		// 空数据
		emptyType: {
			type: Boolean,
			default: true
		},
		infoSlotName: {
			type: String,
			default: ''
		},
		borderRadiusStyle: {
			type: String,
			default: '0'
		},
		notShow: {
			type: Boolean,
			default: true
		},
		bgColorS: {
			type: String,
			default: '#fbf7f7'
		},
		paddingT: {
			type: String,
			default: '25rpx'
		}
	},
	watch: {
		allList(newval, oldval) {
			this.setDataList(newval)
		}
	},
	methods: {
		// 处理值
		setDataList(list) {
			this.pageNum = Math.ceil(list.length / 10)
			this.rightList = []
			this.leftList = []
			list.forEach((v, i) => {
				if (i % 2 == 0) {
					this.leftList.push(v)
				}
				if (i % 2 == 1) {
					this.rightList.push(v)
				}
			})
			// console.log('this.rightList', this.rightList);
			// console.log('this.leftList', this.leftList);
		},
		waterItemBtn(val) {
			this.$emit('goodsFlowCall', val)
		}
	},
	mounted() {}
}
</script>

<style lang="scss">
	.waterfall-goods {
		width: 100%;

		.waterfall-goods-son {
			// width: 48%;
			width: 50%;

			.waterfall-goods-item {
				padding: 26rpx 16rpx;
				background-color: #ffffff;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
			}

			.waterfall-goods-title {
				margin-top: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #222222;
			}

			.waterfall-goods-info {
				width: 100%;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				margin: 10rpx 0;
			}

			.waterfall-goods-price {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ff364e;
				padding-right: 20rpx;
			}
		}

		.waterfall-goods-son:nth-child(odd) {
			// margin-right: 2%;
		}

		.waterfall-goods-son:nth-child(even) {
			margin-left: 2%;
		}

		.icon-num {
			font-size: 20rpx;
		}
	}

	.goods-market-price {
		font-size: 20rpx;
		color: #999999;
		font-style: italic;
		text-decoration: line-through;
	}

	.xszkstyle {
		border: 1rpx solid red;
		max-width: 120rpx;
		text-align: center;
		font-size: 18rpx;
		margin-top: 10rpx;
	}
</style>
